<template>
  <a-card style="width: 100%">
    <!-- 搜索 -->
    <a-form name="customized_form_controls" layout="inline" :model="values" @finish="onFinish"
      style="margin: 30px 0; background: #fff" expandFixed="true">
      <!-- 文件名称输入框 -->
      <a-form-item name="types" label="类型">
        <a-input v-model:value="values.types" placeholder="请输入类型" />
      </a-form-item>
      <!-- 文件类型输入框 -->
      <a-form-item name="title" label="搜索词">
        <a-input v-model:value="values.title" placeholder="请输入搜索词" />
      </a-form-item>
      <!-- 文件类型输入框 -->
      <a-form-item name="count" label="搜索量">
        <a-input v-model:value="values.count" placeholder="请输入搜索量" />
      </a-form-item>
      <a-form-item expandFixed="right">
        <a-button type="primary" html-type="submit">搜索</a-button>
        <a-button @click="() => toset()">重置</a-button>
      </a-form-item>
    </a-form>
  </a-card>
  <br />
  <a-card style="width: 100%">
    <a-card v-if="state.selectedRowKeys.length != 0">
      <a-space>
        <a-button @click="()=>removeall()">删除</a-button>
      </a-space>
    </a-card>
    <a-table :dataSource="searchList" :columns="columns" style="width: 100%; height: 100%" :pagination="false"
      :row-selection="{ onChange: onSelectChange }">
      <template #bodyCell="{ column, record }">
        <!-- 设置 -->
        <template v-if="column.key === 'address'">
          <div class="edits">
            <a-popconfirm title="你确定要删除它吗" ok-text="是" cancel-text="否" @confirm="() => confirm(record)">
              <a-button>删除</a-button>
            </a-popconfirm>
          </div>
        </template>
      </template>
    </a-table>
  </a-card>
  <a-card style="width: 100%">
    <a-pagination v-model:current="current" v-model:page-size="pageSize" :total="total"
      :page-size-options="pageSizeOptions" show-size-changer @showSizeChange="onShowSizeChange"
      @change="handleTableChange" />
  </a-card>
</template>

<script setup lang="ts">
import { reactive, computed, ref } from "vue"
import { storeToRefs } from "pinia";
import { useSearch } from "../../store/searchs"
let searchs = useSearch();
let { searchList, total } = storeToRefs(searchs)
localStorage.removeItem("searchobj")
let flag = false;

//定义搜索框的初始数据
const values = reactive({
  title: "",
  types: "",
  count: ''
});
//重置
const toset = () => {
  location.reload()
}

//点击搜索获取表单数据
const onFinish = () => {
  //点击模糊搜索
  console.log(values, "values")
  flag = true
  searchaa()
}

//封装一个模糊搜索的方法
let searchaa = () =>{
  let obj = JSON.parse(localStorage.getItem("searchobj")||'{}');

  if(flag){
    obj = {
      page:1,
      pageSize:12
    }
  }else{
    obj = {
      ...obj,
      page:current.value,
      pageSize:pageSize.value
    }
  }
  if(values.count){
    obj = {...obj,count:values.count}
  }
  if(values.types){
    obj = {...obj,types:values.types}
  }
  if(values.title){
    obj = {...obj,keyword:values.title}
  }
  localStorage.setItem("searchobj",JSON.stringify(obj))
  searchs.getsearchsList(obj)
}

//点击删除单个
const confirm = (val:any) => {
  // console.log(val.id,'ok')
  searchs.removeSearchs(val.id)
};


//删除多个
const removeall = () =>{
 searchs.removealls([...state.selectedRowKeys])
}

//定义分页数据
let current = ref(1), pageSize = ref(12);
const pageSizeOptions = ref<string[]>(['8', '12', '16', '20', '24']);
//初始化页面数据
searchs.getsearchsList({ page: current.value, pageSize: pageSize.value })
// 表格分页change事件
const handleTableChange = (page: number, pageSizes: number) => {
  // console.log(page,pageSize,"val")
  current.value = page
  pageSize.value = pageSizes
  //点击分页 切换分页 请求数据
  flag = false;
  searchaa()
}
const onShowSizeChange = (currents: number, pageSizes: number) => {
  console.log(currents, pageSizes, "页码，条数");
  current.value = 1
  pageSize.value = pageSizes;
};

//多选

type Key = string | number;
const state = reactive<{
  selectedRowKeys: Key[];
  loading: boolean;
}>({
  selectedRowKeys: [], // Check here to configure the default column
  loading: false,
});

const onSelectChange = (selectedRowKeys: Key[]) => {
  state.selectedRowKeys = selectedRowKeys;
};



//表格数据格式
const columns = [
  {
    title: "搜索词",
    dataIndex: "keyword",
    key: "keyword",
    width: 100,

  }, {
    title: "搜索量",
    dataIndex: "count",
    key: "count",
    width: 100,

  }, {
    title: "搜索时间",
    dataIndex: "createAt",
    key: "createAt",
    width: 100,

  },
  {
    title: "编辑",
    dataIndex: "address",
    key: "address",
    width: 100,
    fixed: "right",
  },
];
</script>

<style></style>